<!doctype HTML>
<div id="target" style="position: absolute; width: 200px; height: 200px; will-change: transform; background: lightblue; mix-blend-mode: overlay;"></div>
<div id="affected" style="position: absolute; width: 200px; height: 200px; top: 100px; left: 100px; background: lightgray"></div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
onload = function() {
    test(function() {
        if (window.internals) {
            var layer_tree = internals.layerTreeAsText(document);
            assert_true(layer_tree.includes("id='affected'"), 'should not be squashed into the layer with blend mode');
            assert_true(layer_tree.includes("id='target'"), 'composited layer with blend mode');
        }
    });
};
</script>
